<!--  -->
<template>
  <div class="comment">
    <div class="comment-wrap">
      <div v-if='loginStatus!=="false"' class="send_wrap">
        <el-input clearable rows="3" type="textarea" v-model="send_comment" maxlength="140" show-word-limit>
        </el-input>
        <div class="send_button">
          <el-button @click=sendComment round>评论</el-button>
        </div>
      </div>
      <ul v-show="hotLength>0">
        热门评论:
        <li v-for="(item, index) in Comment.hotComments" :key="index">
          <div @click="toUser(item.user.userId)" class="cover">
            <img :src="item.user.avatarUrl" alt="" />
          </div>
          <div class="content">
            <div class="user-name">{{ item.user.nickname }}</div>
            <div class="info">{{ item.content }}</div>
            <div class="footer">
              <div class="time">{{ item.time | dateFormat }}</div>
              <div class="button">
                <el-button :disabled='loginStatus!=="true"' v-if="!item.liked" @click="getHotCommentLike(item.commentId,1,index)" icon="iconfont icondianzan" circle> {{item.likedCount}}</el-button>
                <el-button :disabled='loginStatus!=="true"' v-else @click="getHotCommentLike(item.commentId,0,index)" icon="iconfont iconicon_goodfill active" circle> {{item.likedCount}}</el-button>
                <el-button icon="iconfont iconfenxiang" circle></el-button>
                <el-button icon="iconfont iconpinglun" circle></el-button>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <ul v-if="length>0">
        全部评论:
        <li v-for="(item, index) in Comment.comments" :key="index">
          <div @click="toUser(item.user.userId)" class="cover">
            <img :src="item.user.avatarUrl" alt="" />
          </div>
          <div class="content">
            <div class="user-name">{{ item.user.nickname }}</div>
            <div class="info">{{ item.content }}</div>
            <div class="footer">
              <div class="time">{{ item.time | dateFormat }}</div>
              <div class="button">
                <el-button :disabled='loginStatus!=="true"' v-if="!item.liked" @click="getCommentLike(item.commentId,1,index)" icon="iconfont icondianzan" circle> {{item.likedCount}}</el-button>
                <el-button :disabled='loginStatus!=="true"' v-else @click="getCommentLike(item.commentId,0,index)" icon="iconfont iconicon_goodfill active" circle> {{item.likedCount}}</el-button>
                <el-button icon="iconfont iconfenxiang" circle></el-button>
                <el-button icon="iconfont iconpinglun" circle></el-button>
              </div>
            </div>
          </div>

        </li>
      </ul>
      <el-empty v-else description="暂没有评论，快来抢沙发吧~"></el-empty>
    </div>
    <pagination v-if="length>0" :count="comment.total" @getCommentPage="getCommentPage"></pagination>
  </div>
</template>

<script>
console.log()
import { mapGetters } from 'vuex'
import pagination from 'components/songListPage/pagination'
import { getCommentLike, sendComment } from 'util/songListPage'
export default {
  name: '',
  components: {
    pagination
  },
  props: {
    comment: {},
    currentId: String,
    hotLength: {
      typeof: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters('userInfo', ['loginStatus'])
  },
  data() {
    return {
      Comment: {},
      length: 0,
      send_comment: ''
    }
  },
  watch: {
    comment(newVal) {
      this.Comment = newVal
      // console.log(this.Comment.comments);
      this.length = this.Comment.comments.length
    }
  },
  methods: {
    // 获取评论页
    getCommentPage(page) {
      this.$emit('getCommentPage', page)
    },
    toUser(id) {
      this.$router.push('/userInfo/' + id)
    },
    //全部评论点赞
    async getCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.$route.params.id, cid, type, 2)
      console.log(data);
      if (data.code == '200' && type === 1) {
        this.Comment.comments[index].liked = true
        this.Comment.comments[index].likedCount += 1
      } else {
        this.Comment.comments[index].liked = false
        this.Comment.comments[index].likedCount -= 1
      }
    },
    //热门评论点赞
    async getHotCommentLike(cid, type, index) {
      let { data } = await getCommentLike(this.$route.params.id, cid, type, 2)
      // console.log(data);
      if (data.code == '200' && type === 1) {
        this.Comment.hotComments[index].liked = true
        this.Comment.hotComments[index].likedCount += 1
      } else {
        this.Comment.hotComments[index].liked = false
        this.Comment.hotComments[index].likedCount -= 1
      }
    },
    async sendComment() {
      let { data } = await sendComment(1, 2, this.$route.params.id, this.send_comment)
      if (data.code == 200) {
        this.$message({
          message: '评论成功'
        })
        this.send_comment = ""
      }
    }
  }
}
</script>

<style scoped lang='less'>
.comment-wrap {
    padding: 0 5.25rem;

}

.comment-wrap ul li {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  margin-right: 50px;
}
.comment-wrap .cover {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #eee;
}
.comment-wrap .cover img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.comment-wrap .content {
  margin-left: 10px;
  width: 100%;
}
.comment-wrap .content .user-name {
  color: #44cef6;
  font-size: 13px;
  margin-top: -3px;
  margin-bottom: 7px;
}
.comment-wrap .content .info {
  color: #373737;
  font-size: 12px;
  line-height: 2em;
}
.comment-wrap .content .time {
  margin-top: 5px;
  color: rgb(136, 129, 129);
  font-size: 11px;
}
.footer {
  display: flex;
  justify-content: space-between;
  .time {
  }
  .button {
    .el-button {
      font-size: 10px;
      border: none;
      padding: 0;
      margin-right: 10px;
    }
    .active {
      color: red;
    }
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ec4141;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:hover {
  color: #ec4141;
}
.send_wrap {
  padding-left: 20px;
  width: 94%;
  margin-bottom: 30px;
}
.send_button {
  margin-top: 10px;
  /deep/.el-button {
    float: right;
    padding: 8px 17px;
  }
}
</style>